<template>

	<view class="wrap">
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<u-form-item :label-position="labelPosition" label="名称" prop="title">
				<u-input :border="border" placeholder="请输入商品名称" v-model="model.title" type="text"></u-input>
			</u-form-item>
			<u-form-item :label-position="labelPosition" label="价格" prop="price">
				<u-input :border="border" placeholder="请输入商品价格" v-model="model.price" type="number"></u-input>
			</u-form-item>
			<u-form-item :label-position="labelPosition" label="位置" prop="position">
				<u-input :border="border" type="select" :select-open="actionSheetShow" v-model="model.position"
					placeholder="请选择发布位置" @click="actionSheetShow = true"></u-input>
			</u-form-item>
			<u-form-item :label-position="labelPosition" label="简介" prop="text">
				<u-input type="textarea" :border="border" placeholder="请填写简介" v-model="model.text" />
			</u-form-item>
			<u-form-item :label-position="labelPosition" label="成色" prop="isnew" label-width="150">
				<u-radio-group v-model="radio" @change="radioGroupChange" :width="radioCheckWidth"
					:wrap="radioCheckWrap">
					<u-radio shape="circle" v-for="(item, index) in radioList" :key="index" :name="item.name">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<!-- 此处switch的slot为right，如果不填写slot名，也即<u-switch v-model="model.remember"></u-switch>，将会左对齐 -->
			<view class="u-demo-wrap">
				<view class="u-demo-area">
					<view class="pre-box" v-if="!showUploadList">
						<view class="pre-item" v-for="(item, index) in lists" :key="index">
							<image class="pre-item-image" :src="item.url" mode="aspectFill"></image>
							<view class="u-delete-icon" @tap.stop="deleteItem(index)">
								<u-icon name="close" size="20" color="#ffffff"></u-icon>
							</view>
							<u-line-progress v-if="item.progress > 0 && !item.error" :show-percent="false" height="16"
								class="u-progress" :percent="item.progress"></u-line-progress>
						</view>
					</view>
					<u-upload @on-choose-fail="onChooseFail" ref="uUpload" :custom-btn="customBtn"
						:show-upload-list="showUploadList" action="http://101.35.142.191:3001" :file-list="fileList"
						:show-progress="showProgress" :deletable="deletable" :max-count="maxCount" :form-data='formdata'
						:before-upload='bful'>
						<view v-if="customBtn" slot="addBtn" class="slot-btn" hover-class="slot-btn__hover"
							hover-stay-time="150">
							<u-icon name="photo" size="60" :color="$u.color['lightColor']"></u-icon>
						</view>
					</u-upload>
					<u-button :custom-style="{marginTop: '40rpx'}" @click="clear">清空列表</u-button>
					<!-- <u-button :custom-style="{marginTop: '40rpx'}" @click="reUpload">重新上传</u-button> -->
				</view>
			</view>
		</u-form>
		<u-button @click="submit">提交</u-button>
		<u-toast ref="uToast" />
		<u-action-sheet :list="actionSheetList" v-model="actionSheetShow" @click="actionSheetCallback"></u-action-sheet>

	</view>
</template>

<script>
	export default {
		data() {
			let that = this;
			return {
				count: 0,
				model: {
					action: '',
					title: '',
					price: '',
					content: '',
					image: [],
					isnew: 0,
					goodsType: '',
					like: false,
					key: -1,
					position: '',

				},
				temimgs: [],
				temimgslast: [],
				houzui: [],
				radio: '全新',
				fileList: [],
				showUploadList: true,
				customBtn: false,
				autoUpload: false,
				showProgress: true,
				deletable: true,
				customStyle: false,
				maxCount: 9,
				lists: [], // 组件内部的文件列表
				rules: {
					title: [{
							required: true,
							message: '请输入商品名称',
							trigger: 'blur',
						},
						{
							min: 1,
							max: 15,
							message: '名称长度限制在3到5个字符',
							trigger: ['change', 'blur'],
						},
					],
					price: [{
							required: true,
							message: '请输入价格',
							trigger: ['change', 'blur'],
						},
						{
							type: 'number',
							message: '价格必须为数字',
							trigger: 'change',
						}
					],
					position: [{
						required: true,
						message: '请选择位置',
						trigger: 'change'
					}, ],
					text: [{
							required: true,
							message: '请填写简介'
						},
						{
							min: 5,
							message: '简介不能少于5个字',
							trigger: 'change',
						},
					],
				},
				formdata: {
					name: ''
				},
				border: false,
				check: false,
				selectStatus: 'close',
				radioList: [{
						name: '全新',
						checked: true,
						disabled: false
					}, {
						name: '二手',
						checked: true,
						disabled: false
					},

				],
				actionSheetList: [{
					text: 'D1'
				}, {
					text: 'D2'
				}, {
					text: 'D3'
				}, {
					text: 'D4'
				}, {
					text: 'D5'
				}, {
					text: 'D6'
				}, {
					text: 'D7'
				}],
				actionSheetShow: false,
				pickerShow: false,
				selectShow: false,
				radioCheckWidth: 'auto',
				radioCheckWrap: false,
				labelPosition: 'left',
				codeTips: '',
				errorType: ['message'],
			};
		},
		onLoad() {

		},

		computed: {
			borderCurrent() {
				return this.border ? 0 : 1;
			},
			postname() {

				return this.$store.state.uid;
			},
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			reUpload() {
				this.$refs.uUpload.reUpload();
			},
			clear() {
				this.$refs.uUpload.clear();
			},
			deleteItem(index) {
				this.$refs.uUpload.remove(index);
			},
			radioGroupChange(e) {
				this.model.isnew = e == '全新' ? 1 : 0;
			},
			bful() {
				let uid;
				uni.getStorage({
					key: 'uid',
					success(res) {
						uid = res.data;
					}
				})
				this.formdata.name = uid + '-' + Date.now();
				this.temimgs.push('http://101.35.142.191:8081/uploads/secondhand/' + this.formdata.name);
			},
			submit() {
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				this.temimgslast = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				console.log(this.temimgslast)
				for (let i = 0; i < this.temimgslast.length; i++) {
					this.houzui.push(this.temimgslast[i].file.name.slice(-4))
				}
				for (let i = 0; i < this.temimgslast.length; i++) {
					this.model.image.push(this.temimgs[i] + this.houzui[i])
				}
				this.$refs.uForm.validate(valid => {
					if (valid) {
						let uid;
						uni.getStorage({
							key: 'uid',
							success(res) {
								uid = res.data
							}
						});
						let res = uniCloud.database('cupkdemo').collection('secondhand').add({
							user_id: uid,
							title: this.model.title,
							content: this.model.text,
							price: this.model.price,
							position: this.model.position,
							imgs: this.model.image,
							isnew: this.model.isnew
						})
						this.$refs.uToast.show({
							title: '发布成功',
							type: 'success',
							back: true
						})




					} else {
						
						uni.showToast({
							title: '请检查输入信息!',
							icon: 'none'
						});
					}
				})
			},
			// 点击actionSheet回调
			actionSheetCallback(index) {
				uni.hideKeyboard();
				this.model.position = this.actionSheetList[index].text;
			},
		}
	};
</script>

<style scoped lang="scss">
	.wrap {
		padding: 30rpx;
	}
</style>

<style lang="scss">
	.u-demo-wrap {
		background-color: #FFFFFF;
		padding: 40rpx 8rpx;
		margin-left: -14rpx;
		margin-right: -14rpx;
	}

	.u-add-wrap {
		flex-direction: column;
		color: $u-content-color;
		font-size: 28rpx;
	}

	/deep/ .slot-btn {
		width: 329rpx;
		height: 140rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgb(244, 245, 246);
		border-radius: 10rpx;
	}

	.slot-btn__hover {
		background-color: rgb(235, 236, 238);
	}

	.pre-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.pre-item {
		flex: 0 0 48.5%;
		border-radius: 10rpx;
		height: 140rpx;
		overflow: hidden;
		position: relative;
		margin-bottom: 20rpx;
	}

	.u-progress {
		position: absolute;
		bottom: 10rpx;
		left: 8rpx;
		right: 8rpx;
		z-index: 9;
		width: auto;
	}

	.pre-item-image {
		width: 100%;
		height: 140rpx;
	}

	.u-delete-icon {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		z-index: 10;
		background-color: $u-type-error;
		border-radius: 100rpx;
		width: 44rpx;
		height: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>

<style>
	.bg {
		background-color: #c3c7cf;
	}

	input {
		border: #C0C0C0 2rpx;
		height: 200rpx;
		width: 70%;
		margin: 0 auto;
	}
</style>

